<template>
  <div class="infinite-container bgwhite pd10">
    <div class="radio-wrap">
      <div class="radio-item" v-for="(item,i) in classifyObj" :key="i">
        <mu-radio :label="item" :nativeValue="i" v-model="params.classify" />
      </div>
    </div>

    <div class="mt20">
      <mu-text-field
        hintText="请描述你的问题"
        v-model="params.content"
        fullWidth
        :errorText="multiLineInputErrorText"
        @textOverflow="handleMultiLineOverflow"
        multiLine
        :rows="4"
        :rowsMax="10"
        :maxLength="240"
      />
    </div>

    <div class="mt20">
      <div class="textFieldStyle">
        <ul class="fileHandler flex wrap">
          <li v-for="(item,index) in fileList" :key="index">
            <img :src="item.src" alt />
            <div @click="uploader&&uploader.delFile(index)"></div>
          </li>
          <li>
            <input
              multiple="multiple"
              type="file"
              name="upload"
              id="avatar_load"
              ref="upload1"
              @change="uploader&&(uploader.fileChange(3))"
              accept="image/*"
            />
            <img v-show="fileList.length < 3" src="../../assets/images/icon_add_img.png" width="40" alt />
          </li>
        </ul>
        <p class="color-gray">至多上传3张图片，单张图片最大1兆</p>
      </div>
    </div>

    <div class="mt10">
      <mu-switch label="是否愿意电话回访" v-model="receiveCallBack" />
    </div>
    <div class="mt10" v-if="receiveCallBack">
      您的联系电话：
      <mu-text-field v-model="params.phoneNo" hintText="请输入联系电话" style="width:130px;" />
    </div>

    <div class="mt20">
      <mu-raised-button primary class="submit-btn" fullWidth @click="submit">提交</mu-raised-button>
    </div>

    <div class="page-bottom">
      <a href="#" @click.prevent="$router.push('/setting/feedback/list')">我的反馈</a>
    </div>

    <mu-dialog :open="barDialog" @close="barDialog = false" titleClass="提示">
      <div slot="title" class="flex flex_vcenter">
        <span>感谢反馈，您的问题我们已记录。</span>
      </div>
      <mu-flat-button class="mt20" slot="actions" @click="gotoList" primary label="知道了" />
    </mu-dialog>
  </div>
</template>
<script>
import Uploader from "../../components/Uploader.js";
import { commonAjaxJson, RESTFUL_API } from "@/api/api";
import { testPhone } from "@/common/js/util";

export default {
  data() {
    let query = this.$route.query
    return {
      barDialog: false,
      classifyObj: {
        "01": "意见建议",
        "02": "问题反馈",
        "03": "其他"
      },
      params: {
        classify: "01",
        content: "",
        avatar: "",
        phoneNo: "",
        operater: query.operater || '',
        osVersion: query.osVersion || '',
        appVersion: query.appVersion || '',
        status: 2,
        roleType: sessionStorage.roleType || 1
      },
      receiveCallBack: true,
      fileList: [],
      multiLineInputErrorText: "",
      uploader: null
    };
  },
  mounted() {
    this.uploader = new Uploader(this.fileList, this.$refs.upload1);
    this.getFamilys();
  },
  methods: {
    handleMultiLineOverflow(isOverflow) {
      this.multiLineInputErrorText = isOverflow ? "超过啦！！！！" : "";
    },
    // get user phone
    getFamilys() {
      commonAjaxJson(
        RESTFUL_API.listFamily,
        { userId: sessionStorage.getItem("userId") },
        true
      ).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.params.phoneNo = res.data.data[0].mobile;
        }
      });
    },
    // submit
    submit() {
      if (!this.params.content || this.params.content.length > 240) {
        return;
      }
      if (!testPhone(this.params.phoneNo) && this.receiveCallBack) {
        this.$store.commit("UPDATE_TOAST", {
          message: "请输入正确的手机号"
        });
        return;
      }
      this.uploader.doUpLoad("src").then(v => {
        var imgids = v && v[0];

        this.params.avatar = imgids || "";
        if (!this.receiveCallBack) {
          this.params.phoneNo = "";
        }
        this.params.token = sessionStorage.token;
        
        commonAjaxJson(RESTFUL_API.popBaseFeedbackAdd, this.params, true).then(
          res => {
            
            this.barDialog = true;
          }
        );
      });
    },
    gotoList() {
      this.$router.push("/setting/feedback/list");
    }
  }
};
</script>
<style lang="less" scoped>
.radio-wrap {
  display: flex;
  .radio-item {
    flex: 1;
  }
}
.fileHandler {
  li {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    input {
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
    img {
      width: 80%;
      height: 80%;
    }
  }
  > li:not(:last-child) {
    > div {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 20px;
      height: 20px;
      background: url("../../assets/wzjl/icon_del_img.png") no-repeat center
        center/20px 20px;
    }
  }
}
.color-gray {
  color: #999;
}
.page-bottom {
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 1em;
}
</style>